<script setup>
import { reactive, ref,nextTick,getCurrentInstance } from 'vue'
import { giftList,giftListDetail,getUserWallet } from '../../http/api'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
import itemTitle from '../../components/itemTitle/index.vue'
import eggSortList from '../../components/eggSortList/index.vue'
import sortItemList from '../../components/sortItemList/index.vue'
//引入全局注册的proxy
const { proxy } = getCurrentInstance()
const { $t } = proxy;
const router = useRouter()
// 用户信息对象
let userInfo = ref(undefined)
const scrollTop = ref(0)
let $backTop = ref(proxy.$backTop)
$backTop.value(scrollTop.value)
// 获取用户钱包信息
const getUserWalletFn =()=>{
    getUserWallet().then((res)=>{
        console.log(res,'res进去了49')
        if(res?.code && res.code === 200){
            userInfo.value.balance = res.result.balance
        }
    })
   
}
locale.value = localStorage.getItem('lang') || 'zhCN'
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()
}
// 排序下拉框值
let sortOptions = reactive([
    {

        value: 'A_Z'
    },
    {

        value: 'PRICE_HIGHEST'
    },
    {

        value: 'PRICE_LOWEST'
    },
    {

        value: 'Z_A'
    },
])
let pageNo = ref(1)
let sortOptVal = ref('PRICE_HIGHEST')
let inputName = ref('')
// 是否查看更多
let isLookMore = ref(true)

//子组件排序下拉框返回的change事件
const emitSortOptionVal = (val) => {
    sortOptVal.value = val
    isLookMore.value = true
    pageNo.value = 1
    egglist.length = 0
    getgiftList(inputName.value, pageNo.value, val,isLookMore.value)
}
let eggNameSearch = ref('')
// 子组件点击搜索按钮事件
const emitSearchInputVal = (val) => {
    console.log(val, 'valfathy')
    inputName.value = val
    isLookMore.value = true
    egglist.length = 0
    pageNo.value = 1
    getgiftList(inputName.value, pageNo.value, sortOptVal.value,isLookMore.value)
}
let egglist = reactive([])
// 获取礼品列表
const getgiftList = async (name, pageNo, sortByEnum) => {
    
    console.log(isLookMore.value,'isLookMore.value')
    if(!isLookMore.value){
        return
    }
    let res = await giftList({
        name,
        pageNo,
        "pageSize": 12,
        sortByEnum
    })
    // 分页
    if (res.records.length) {
        if (isLookMore.value) {
            console.log(res.records,'111进去了')

            if(res.records.length <= 12){
                console.log(res.records,'222进去了')

                // console.log('进去了')
                isLookMore.value = true
                egglist.push(...res.records)
            }else{
                isLookMore.value = true
                egglist.push(...res.records)

            }
        }

    }else{
        // egglist.length = 0
        isLookMore.value = false
    }
    console.log(res, '礼品库列表')
}
getgiftList('', 1, 'PRICE_HIGHEST')
// 查看更多按钮点击
const lookMore = () => {
    if(!isLookMore.value){
        return
    }
    pageNo.value += 1
    // isLookMore.value = true
    getgiftList(inputName.value, pageNo.value, sortOptVal.value) 
   
}
// 子组件传出来的id
const emitId = (id)=>{
    console.log(id)
    giftListDetailFunc(id)
}
let BoxId = ref('')
let detailInfo = ref({})
// 获取礼品详情
const giftListDetailFunc = async(giftId)=>{
    let res = await giftListDetail({giftId})
    if(res){
        nextTick(()=>{
            console.log(res,'礼品详情')

            BoxId.value = res.relBoxList[0].id
            // router.push({path:`/raffle`,query:{id:BoxId.value}})

            // router.push({path:`/raffle`,query:{id:res.relBoxList[0].id}})
            detailInfo.value = res
            // console.log(detailInfo.value,'礼品详情')
        })
    }

    
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
    console.log(res, 'reszizujian')
}
const toPageEmit=(id)=>{
    router.push({name:`raffle`,query:{id}})
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
</script>
<template>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
        <headNavigation   @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark" :menuTabWordIndex="1" :userInfo="userInfo" @loginEmit="loginEmit"></headNavigation>

        <itemTitle :titleWidth="412"  bot-text="Our prizes" :placeholder="locale === 'en' ? 'Search for what you want...' : '搜索你想要的...'" :isEn="locale" :is-prize="true" :isDark="isDark" :title="$t('msg.message.OurPrizes')"  :is-show-line="false"
            :sortOptions="sortOptions" @emitSortOptionVal="emitSortOptionVal" @emitSearchInputVal="emitSearchInputVal">
        </itemTitle>
        <sortItemList></sortItemList>
        <eggSortList   :viewDetailText="$t('msg.message.Viewdetails')"  @toPageEmit="toPageEmit" @emitId="emitId" :detailInfo="detailInfo" :egglist="egglist" :isGoPage="false" pageType="prize" :BoxId="BoxId"></eggSortList>
        <div class="loadMore">
            <div :class="locale != 'en' ? 'findMoreBtn' : 'findMoreBtn w216'" :style="{color:isDark ? '#fff' : '#000',background:isDark ? 'unset':'#fff'}"  @click="lookMore">{{isLookMore ? $t('msg.message.viewMore') : $t('msg.message.nothing')}}</div>
        </div>
    </div>
    
</template>
<style scoped>
.homeBody {
    overflow-x: hidden;
   max-width: 2560px;
    min-width: 1350px;
    /* height: 100vh; */
    /* padding-bottom: 50px; */
    overflow-y: auto;
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.findMoreBtn {
    font-size: 20px;
    color: #fff;
    border: 1px solid;
    display: flex;
    height: 38px;
    align-items: center;
    padding: 4px 15px;
    /* border-radius: 36px; */
    cursor: pointer;
    width: 146px;
    height: 54px;
    /* border-radius: 8px; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid #27D698;
}
.w216{
    width: 256px !important;
}
.loadMore {
    display: flex;
    max-width: 1920px;
    justify-content: center;
    margin: 0 240px;
    padding: 30px 0 30px;
}
@media (min-width: 2133px){
    .eggSortInfo{
        max-width: 2560px;
        margin: 0px 184px;
    }
}

</style>